<template>
  <div class="trapezoid">
    <div class="left-triangle"></div>
    <div class="center-content">{{ title || "示例标题" }}</div>
    <div class="right-triangle"></div>
  </div>
</template>

<script>
export default {
  name: "Trapezoid",
  props: ["title"],
};
</script>

<style lang='less' scoped>
@primaryColor: #05154c;
.trapezoid {
  display: flex;
  position: absolute;
  left: calc(50% - 100px);
  top: 0;
  z-index: 10;
  .left-triangle {
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-right: 20px solid @primaryColor;
  }
  .center-content {
    width: 200px;
    height: 40px;
    background-color: @primaryColor;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
  }

  .right-triangle {
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-left: 20px solid @primaryColor;
  }
}
</style>